<template>
  <div class="app-container">

    <el-row class="promotion-main" :gutter="20">
      <el-col :span="12" :offset="0">
        <div class="promotion-center">
          <h3>财务数据</h3>
          <!-- 邀请码 -->
          <div class="invite-code">
            <label>总盈利：</label>
            <span>{{ userAccount.accumulate_money }}</span>
          </div>

          <!-- 邀请链接 -->
          <div class="invite-link">
            <label>余额：</label>
            <span>{{ userAccount.user_money }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12" :offset="0">
        <div class="promotion-center">
          <h3>推广中心</h3>
          <!-- 邀请码 -->
          <div class="invite-code">
            <label>邀请码：</label>
            <span>{{ userAccount.invitation_code }}</span>
            <el-button
              v-clipboard:copy="userAccount.invitation_code"
              v-clipboard:success="onCopy"
              class="copy-btn"
              type="primary"
              size="mini"
            >复制</el-button>
          </div>

          <!-- 邀请链接 -->
          <div class="invite-link">
            <label>邀请链接：</label>
            <span>{{ userAccount.invitation_url }}</span>
            <el-button
              v-clipboard:copy="userAccount.invitation_url"
              v-clipboard:success="onCopy"
              class="copy-btn"
              type="primary"
              size="mini"
            >复制</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 数据列表 start -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>推广记录</span>
      </div>
      <fire-table
        ref="table"
        :list="list"
        :total="total"
        row-key="bloc_id"
        :list-loading="listLoading"
        :list-query="filterInfo.data"
        :columns="tableColumns"
        :handle="tableHandle"
        @handleSelectionChange="handleSelectionChange"
      >
        <template slot="status" slot-scope="{ row }">
          <el-tag>{{ statusList[row.status].text }}</el-tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 10px"
            @click="accountLog(row, index)"
          >消费记录</el-button>
        </template>
      </fire-table>
    <!-- 数据列表 end -->
    </el-card>

  </div>
</template>

<script>
import { getBlocstatus } from '@/projects/shop/api/addons/bloc'
import {
  getUserAccount,
  initList, itemDelete
} from './api'
import {
  tableColumns,
  filterInfo,
  path
} from './init'
export default {
  data() {
    return {
      statusList: [],
      inviteCode: 'ABC123', // 模拟邀请码的数据
      inviteLink: 'https://example.com/invite?code=ABC123', // 模拟邀请链接的数据
      dialogTableVisible: false,
      // 表格数据 start
      tableColumns: tableColumns,
      // 表格数据end
      // 检索 start
      filterInfo: {
        data: {
          page: 1,
          pageSize: 10
        },
        ...filterInfo
      },
      listLoading: true,
      total: 0,
      userAccount: {},
      list: [],
      excelList: []
    }
  },
  created() {
    this.getUserBloc()
    this.getList()
    getBlocstatus().then((response) => {
      this.statusList = response.data
    })
  },
  methods: {
    onCopy() {
      this.$message.success('复制成功')
    },
    handleSelectionChange(val) {
      console.log('传递来的', val)
    },
    handleRequestSuccess() {
    },
    getUserBloc() {
      getUserAccount().then(res => {
        this.userAccount = res.data
      })
    },
    getList() {
      const that = this
      that.listLoading = true
      initList(that.filterInfo.data).then((response) => {
        that.list = response.data
        console.log('列表数据层级测试', that.list)
        that.listLoading = false
      })
    },
    //  搜索
    handleFilter(row) {
      const that = this
      console.log(row)
      that.$set(that.filterInfo, 'data', row)
      console.log('检索前', that.filterInfo.data)
      that.getList()
    },
    handleReset(row) {
      this.getList()
    },
    handleEvent(row) {
      console.log(row)
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    // 修改
    accountLog(row) {
      this.$router.push({
        name: 'diandi-subscription-order-index',
        params: {
          bloc_id: row.bloc_id,
          rowData: row
        }
      })
    },
    handleCreate() {
      this.$router.push({
        name: path.create
      })
    },
    // 删除
    deleteRow(row) {
      const that = this
      itemDelete(row.id).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.message)
          that.getList()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
  .promotion-main {
    margin-bottom: 15px;
  .promotion-center {
    padding: 15px 20px;
    height: 180px;
    background: #ffffff;
    .copy-btn {
      margin-left: 10px;
    }
  }
}

  .invite-code,
  .invite-link {
    margin-bottom: 10px;
  }

  .team-members {
    width: 100%;
  }

  .team-members th,
  .team-members td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ccc;
  }
  </style>
